<style lang="scss">
  .msg-model-body{
        padding:0px 30px 30px;
        .body-title{
            font-size: 14px;
            font-weight: bold;
            text-align: center;
        }
        .body-content{
            padding: 10px;
        }
        .body-footer{
            padding-right: 10px;
            text-align: right;
        }
        .body-handle{
            text-indent:30px;
            text-align:left;
            font-size:13px;
            color:#2d8cf0;
            padding-top: 8px
        }
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
</style>
<template>
  <Modal v-model="showMsg" :styles="{top: '0px'}" @on-ok="showMsg = false" title="消息通知" footer-hide fullscreen>
    <div class="msg-model-body" style="position: relative;">
      <p class="body-title">{{msgInfo.title}}</p>
      <p v-if="msgInfo.type != 2" class="body-content" style="white-space: pre-line;">{{msgInfo.des}}</p>

      <div v-else style="padding: 2% 0 2% 0">
        <mavon-editor ref="md" v-model="msgInfo.des" style="min-height:100px;z-index:100;" :xssOptions="xssList" :subfield="false" :boxShadow="false" defaultOpen="preview" :toolbarsFlag="false"/>
      </div>

      <a v-if="msgdata.reqId != null && msgdata.reqId != 0 " href="javascript:void(0)" @click="toHandleMessage">
        <p class="body-handle">{{msgdata.isUrge == 1 ? "前往处理>>" : "查看工单详情>>"}}</p>
      </a>
      <p class="body-footer">来源: {{msgInfo.startName}}</p>
      <p class="body-footer">时间: {{formatTime(msgInfo.startTime)}}</p>
    </div>
    <Spin size="large" fix v-if="loadingSpin">
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>正在前往工单页面...</div>
    </Spin>
  </Modal>
</template>
<script>
  import ajax from "../ajax_util"
  import Axios from 'axios'
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  var xss = require('xss')
  export default {
    components:{
      mavonEditor
    },
    data() {
      return {
        xssList: {
          whiteList: xss.whiteList
        },
        loadingSpin: false,
        tabs: {
          isEdit: true,
          tabsPage: "processmain", //需要显示的tab
          lastPage: "",
          list: [{
            title: "首页",
            key: "processmain", //需要加载的组件
            tabKey: "processmain" //tabs的名称
          }],
        },
        msgdata: {},
        clickid: 3, //用与跳转页面时模拟从首页进入
      }
    },
    created() {
      var t = this.$store.state.tabs
      if (t != undefined && t != null && t.tabsPage != undefined) {
        this.tabs = t
      } else {
        this.$store.commit("tabs", this.tabs);
      }
    },
    methods: {
      getImg(des){
        console.log("===图片====");
          var matched_arr = des.match(/\!\[.*?]\((.*?)\)/g);
          var img_names = []
          for (var i in matched_arr) {
              img_names.push( /\!\[.*?]\((.*?)\)/g.exec(matched_arr[i])[1])
          }
          this.$nextTick(() => {
              this.setfile(img_names)
          })
      },
      setfile(img_file){
          console.log('img_file',img_file.length)
          var that=this
          if (img_file.length > 0) {
              for (let index = 0; index < img_file.length; index++) {
                  var url = that.CONFIG.file_url + "/image/" + img_file[index]+".png";
                  Axios.get(url,{responseType: 'blob'
                    }).then(function(response){
                        var blob = new Blob([response.data])
                        var href = window.URL.createObjectURL(blob)
                        console.log('href', href)
                        that.$refs.md.$imgUpdateByUrl(img_file[index], href)
                        return href
                    }).catch(function (error) {
                      if(error&&error.response){
                        if(error.response.status==406){//forbiden
                          that.$Notice.error({
                          desc:  "访问文件不存在",
                          duration: 5,
                          });
                        }else if(error.response.status==403){//forbiden
                          that.$Notice.error({
                            title: '请求拒绝',
                            desc: '您没有当前操作权限',
                          });
                        }else{
                          that.$Notice.error({
                          title: '网络异常',
                          desc:  '请联系管理员进行处理',
                          });
                        }
                      }else if (error == 406){//forbiden
                        that.$Notice.error({
                          desc:  "访问文件不存在",
                          duration: 5,
                        });
                      }else {
                        that.$Notice.error({
                          title: '网络异常',
                          desc:  '请联系管理员进行处理',
                        });
                      }
                  });
              }
          }
      },
      getMsgInfo(id) {
        var url = this.CONFIG.msg_url + "/read/workflow/" + id
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.msgdata = data
            console.log("data-------->", data)
          }
        })
      },
      formatTime(time) {
        return this.utils.formatDate(new Date(time * 1000), "yyyy-MM-dd hh:mm")
      },
      toHandleMessage() {
        this.loadingSpin = true
        this.setTabs(this.msgdata)
        // var temp = {
        //   current: 1,
        //   lowTime: null,
        //   oriUserName: "",
        //   reqId: this.msgdata.reqId,
        //   reqStatus: "-1",
        //   serviceType: "all",
        //   upTime: null,
        // }
        // if (this.msgdata.isUrge == 1) {

        //   this.getTodosProcessList(temp)
        // } else {
        //   this.getDonesProcessList(temp)
        // }
      },
      //已办
      getDonesProcessList(temp) {
        this.clickid = 3
        var url = this.CONFIG.base_url_test + "/dones"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: temp,
          success: function(data) {
            var row = data.records
            if (row.length > 0) {
              that.setTabs(row[0])
            } else {
              that.$Message.error({
                content: '非工单流转相关人员，无权限查看！',
                duration: 3
              });
              setTimeout(() => {
                that.loadingSpin = false
              }, 3000)
            }
          }
        })
      },
      //获取待处理
      getTodosProcessList(temp) {
        this.clickid = 2
        var url = this.CONFIG.base_url_test + "/todos"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: temp,
          success: function(data) {
            var row = data.records
            if (row.length > 0) {
              that.setTabs(row[0])
            } else {
              that.getDonesProcessList(temp)
            }
          }
        })
      },
      setTabs(msgdata) {
        console.log(msgdata)
        var isName = false //是否已经存在标签
        var key = ""
        key = msgdata.reqId + '' + msgdata.taskId
        this.tabs.list.some(item => {
          if (item.tabKey === key) {
            isName = true
            return
          }
        })
        if (!isName) {
          this.tabs.list.push({
            title: this.taskId == null ? "工单详情 " : "处理工单" ,
            key: "handle",
            tabKey: key,
            params: {
              reqId: msgdata.reqId,
              taskId: msgdata.taskId
            }
          })
        }
        this.tabs.isEdit = ""
        this.tabs.lastPage = this.tabs.tabsPage
        this.tabs.tabsPage = key
        this.$store.commit("tabs", this.tabs);
        console.log("this.$router.path--------->", this.$router.path)
        if (this.$router.path != "/processmain") { //是否跳转路由，用以从个人中心进入查看详情
          localStorage.menu = "/processmain"
          this.$router.push({
            path: "/processmain"
          })
        }
        this.loadingSpin = false
        this.showMsg = false
      }
    },
    computed: {
      showMsg: {
        get: function() {
          return this.value;
        },
        set: function(value) {
          this.$emit('input', value);
        }
      },
      //  datInfo(){
      //     return this.msgInfo
      // }
      compiledMarkdown () {
        //this.articleDetail.context数据
         return marked(this.msgInfo.des, { sanitize: true })
       }

    },
    props: {
      value: {},
      msgInfo: {},
    },
    watch: {
      msgInfo(value, oldValue) {
        console.log("====msgInfo=====",value);
        this.getMsgInfo(value.id)
        if(value.type == 2){
          this.getImg(value.des);
        }
      }
    }
  }
</script>
